/* Switch */
  .switch-component {
    display: flex;
    align-items: center;
  }
  .switch {
    display: inline-block;
    // width: 60px;
    // height: 34px;
    width: 48px;
    height: 25px;
    margin: 0;
    position: relative;
    input {
      display:none;
    }
  }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
     
    .slider:before {
      position: absolute;
      content: "";
      // height: 26px;
      // width: 26px;
      // left: 4px;
      // bottom: 4px;
      height: 21px;
      width: 21px;
      left: 3px;
      bottom: 2px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
     
    input:checked + .slider {
      background: #2196F3;
    }
     
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
     
    input:checked + .slider:before {
      -webkit-transform: translateX(21px);
      -ms-transform: translateX(21px);
      transform: translateX(21px);
    }
     
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }
     
    .slider.round:before {
      border-radius: 50%;
    }
